<template>
     <div >  <el-button type="primary" @click="loadermap">加载</el-button></div>
    <div id="container"></div>
   
</template>


<script setup>
import { ref, reactive, onMounted } from 'vue';

// import AMapLoader from '@amap/amap-jsapi-loader';
import { shallowRef } from '@vue/reactivity'


// const map = shallowRef(null);

onMounted(() => {
    // initMap();
})

function loadermap() {
    initMap()
    
}

// function initMap() {
//     AMapLoader.load({
//         key: "f6d8d6ea5f626120bc6d5ca74f4695b5",  // 申请好的Web端开发者Key，首次调用 load 时必填
//         version: "2.0",      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
//         plugins: [],       // 需要使用的的插件列表，如比例尺'AMap.Scale'等
//     }).then((AMap) => {
//         map = new AMap.Map("container", {  //设置地图容器id
//             viewMode: "3D",    //是否为3D地图模式
//             // mapStyle: 'amap://styles/2c3750cc6ed37b2bbea5649067361db3',  //设置地图的显示样式
//             zoom: 5,           //初始化地图级别
//             layers:[
//                 // new AMap.TileLayer.Satellite(),
//                 // new AMap.TileLayer.RoadNet(),
              
//             ],
//             center: [105.602725, 37.076636], //初始化地图中心点位置
//         });
//         console.log("设置图层 ");
//         map.setMapStyle('amap://styles/71f29e79e684ebc735f4c4084ea8cff5');
        

     

//     }).catch(e => {
//         console.log(e);
//     })
// }

</script>



<style lang="less" scoped>
#container {
    padding: 0px;
    margin: 0px;
    width: 100%;
    height: 768px;
}
</style>